<!-- Props默认值设置
Props默认值设置
Props默认值设置
Props默认值设置 -->·


<script setup lang="ts">
// 1. 定义 Props 的类型
interface Props{
  color:string
  size?:string
  type?:'success' |'warning'| 'danger'// 字面量 + 联合类型
}


// 2. 通过范型指定 Props 的类型
// const props = defineProps<Props>()


// 3. withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(),{
  size:'middle',
  type:'success'
})

console.log(props.size);

// Vue 3.3.0 + 设置默认值新语法
// const { color, size = 'middle' } = defineProps<Props>()


</script>

<template>
<!--结构 -->
<button :class="`btn ${size} ${type}`"  :style="{ color: color }">按钮{{ size }}</button></template>

<style scoped>
/*样式*/
.btn{
  color:#2eebff;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
}
.middle{
padding: 10px;
}
.large{
  font-size: 20px;
  padding: 20px;
}
/* 'success' | 'warning' | 'danger' */
.success{
  background-color: #52fd52;
}
.warning{
  background-color: #ff8c00;
}
.danger{
  background-color: #ff0000;
}
</style>